<template>
  <div class="slider">
    <img ref="s2I1" class="s2-i1" src="/static/img/poster/s2-i1.png" alt="">

    <img ref="s2I2" class="s2-i2" src="/static/img/poster/s2-i2.png" alt="">

    <img ref="s2I3" class="s2-i3" src="/static/img/poster/s2-i3.png" alt="">

    <img ref="s2I4" class="s2-i4" src="/static/img/poster/s2-i4.png" alt="">

    <img ref="s2I5" class="s2-i5" src="/static/img/poster/s2-i5.png" alt="">

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { SliderComponents } from '../types'
import { addClass, removeClass } from '@/utils/index'

@Component({
  name: 'Slider2',
})
export default class extends Vue implements SliderComponents {
  animate() {
    const s2I1 = this.$refs.s2I1 as HTMLElement
    addClass(s2I1, 'animated slideInDown')
    removeClass(s2I1, 'hide')

    const s2I2 = this.$refs.s2I2 as HTMLElement
    addClass(s2I2, 'animated slideInUp')
    removeClass(s2I2, 'hide')

    const s2I3 = this.$refs.s2I3 as HTMLElement
    addClass(s2I3, 'animated slideInLeft')
    removeClass(s2I3, 'hide')

    const s2I4 = this.$refs.s2I4 as HTMLElement
    addClass(s2I4, 'animated slideInRight')
    removeClass(s2I4, 'hide')

    const s2I5 = this.$refs.s2I5 as HTMLElement
    addClass(s2I5, 'animated slideInLeft')
    removeClass(s2I5, 'hide')
  }

  animated() {
    const s2I1 = this.$refs.s2I1 as HTMLElement
    removeClass(s2I1, 'animated slideInDown')
    addClass(s2I1, 'hide')

    const s2I2 = this.$refs.s2I2 as HTMLElement
    removeClass(s2I2, 'animated slideInUp')
    addClass(s2I2, 'hide')

    const s2I3 = this.$refs.s2I3 as HTMLElement
    removeClass(s2I3, 'animated slideInLeft')
    addClass(s2I3, 'hide')

    const s2I4 = this.$refs.s2I4 as HTMLElement
    removeClass(s2I4, 'animated slideInRight')
    addClass(s2I4, 'hide')

    const s2I5 = this.$refs.s2I5 as HTMLElement
    addClass(s2I5, 'animated slideInLeft')
    removeClass(s2I5, 'hide')
  }
}
</script>

<style>

</style>
